<!-- This document was created with HomeSite 2.5 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<!--
THE JAVASCRIPT COOKBOOK by Erica Sadun, webrx@mindspring.com
J. Brook Monroe, mrprogguy@techie.com
Copyright (c)2000 by Charles River Media. All Rights Reserved.
This applet can only be re-used or modifed by license holders of the
JavaScript Cookbook CD-ROM. Credit must be given in the source
code and this copyright notice must be maintained. If you do
not hold a license to the JavaScript Cookbook, you may NOT
duplicate or modify this code for your own use.
Use at your own risk. No warranty is given or implied of the suitability
of this applet for any specific application. Neither Erica Sadun nor
Charles River Media will be held responsible for any unwanted effects
due to the use of this applet or any derivative.
-->
<HEAD>
<TITLE>Available Screen Real Estate</TITLE>
</HEAD>
<BODY>
<FONT COLOR="007777"><H1><IMG SRC="../GRAFX/UTENS.JPG" WIDTH=80 HEIGHT=50
ALIGN = LEFT>How Screen Real Estate Do I Own?</H1></FONT>
<BLOCKQUOTE><FONT COLOR="770000">
In this recipe we find out how much of the available screen resolution can actually be used.
</FONT>
<FONT FACE="Arial,Helvetica" SIZE="3">
<UL>
<LI>Current screen dimensions: <SCRIPT LANGUAGE="JavaScript1.2">document.write(screen.width+' by '+screen.height+' pixels (<KBD><FONT COLOR="770000">screen.width, screen.height</FONT></KBD>)')</SCRIPT></LI>
<LI>Available screen dimensions: <SCRIPT LANGUAGE="JavaScript1.2">document.write(screen.availWidth+' by '+screen.availHeight+' pixels (<KBD><FONT COLOR="770000">screen.availWidth, screen.availHeight</FONT></KBD>)')</SCRIPT></LI>
<LI>Size of this window: <SCRIPT LANGUAGE="JavaScript1.2">document.write(window.innerWidth+' by '+window.innerHeight+' pixels (<KBD><FONT COLOR="770000">window.innerWidth, window.innerHeight</FONT></KBD>)')</SCRIPT></LI>
</UL>
</FONT>
<FONT COLOR="007777"><H2>Discussion</H2></FONT>
<FONT SIZE=4>
The <A HREF="SCREEN.HTM">Screen Real Estate</A> recipe introduced the <FONT COLOR="770000">screen</FONT> object, and gave some ideas
for how you might use it to make pages that adapt to the user's screen resolution. It was, however, a bit like
painting a seascape: you can use several brushes, and a broad palette of aquas, blues, and greens, or you can
just get a quart of blue and a roller. With this recipe we move away from the "brush and roller" school of screen
painting and get into something with a little more finesse. (Some of that finesse is demonstrated in this document
itself, because it's dynamically generated...see the source!)<p>
<SCRIPT LANGUAGE="JavaScript1.2"><!--
// See if there's a task bar. If not, either this is Win95/NT and it's turned off, or the user is using a Mac.
if(screen.height == screen.availHeight) {
document.writeln("You can see from the list above that the available height matches the screen height.");
document.writeln("The probable reasons are that you're using Windows 95 or NT, and have the taskbar hiding itself");
document.writeln("automatically, or you're using Windows 3.1 or a Macintosh, neither of which have a taskbar.");
if(navigator.platform == "Win16")
document.write("(It's Windows 3.x!)");
else
if(navigator.platform == "Win32") {
document.write(" (It's Windows 95/NT!) ");
document.writeln("Change the Taskbar Properties to make it visible again, and");
document.writeln("reload this frame. The list above will change, and so will this text!");
}
else
if(navigator.platform.indexOf("Mac") != 1)
document.write("(It's a Macintosh!)");
else
document.write("(It's some kind of Unix workstation!)");
} else {
document.writeln("You can see from the list above that the available height doesn't match the screen height.");
document.writeln("The Win95/NT taskbar (or some other semi-permanent interface feature) is taking up "+(screen.height-screen.availHeight)+" pixels at the bottom of the screen.");
document.writeln("Change the Taskbar Properties to hide it automatically, then reload this frame. You'll see");
document.writeln("the list change, and so will this text!");
}
//-->
</SCRIPT><p>
Even though you can now determine how much of the screen you can use, your script or page probably isn't running in a window the
full size of the screen. You can use <FONT COLOR="770000">window.innerWidth</FONT> and <FONT COLOR="770000">window.innerHeight</FONT>
to determine how to lay out the contents of your page in the current window or frame. This will always work better than
basing it only on the screen resolution.<p>
Now, just when you thought it was safe to design your pages, it's time to visit another recipe so you
can learn to <A HREF="COLORES.HTM">Paint with All the Colors of the Screen</A>.
</FONT>
<BR><BR><h5>Copyright ©2000 by Charles River Media, All Rights Reserved</h5>
</BODY>
</HTML>